<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items service UI</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <!--Scripts-->
    <script type="text/javascript" src="js/libs/Zdom.js"></script>
    <script type="text/javascript" src="js/libs/helpers/underscore-min.js"></script>
    <script type="text/javascript" src="js/libs/Ajax.js"></script>
    <script type="text/javascript" src="js/libs/ItemAjaxService.js"></script>
    <script type="text/javascript" src="js/libs/mainActions.js"></script>
    <script type="text/javascript" src="js/pageEvents.js"></script>
    <script type="text/javascript" src="js/libs/ejs_production.js"></script><!-- js template lib -->
</head>
<div class="container">

    <div class="row-fluid site-border">
        <div class="span12 bottom-border">
             <h2 class="span12 text-center">Item List</h2>
        </div>

        <div class="row-fluid">
            <div class="span12">
                <div class="row-fluid tobBottom-margin">

                    <div class="span2 inside-padding">
                        <button class="btn btn-primary add-new"><i class="icon-ok icon-white"></i>Add New</button>
                    </div>

                    <div class="span3 form-horizontal">
                            <label class="label-filter" for="inputSortBy"><b>Sort By:</b></label>
                            <select id="inputSortBy" class="span6">
                                <option value="id">Id</option>
                                <option value="name">Name</option>
                                <option value="price">Price</option>
                                <option value="height">Height</option>
                                <option value="width">Wight</option>
                                <option value="lengths">Length</option>
                            </select>
                    </div>

                    <div class="row-fluid">
                        <div class="span12">
                            <hr class="hr-line"/>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div id="text-area" class="span10 offset1">


            </div>
        </div>
        <!-- popup start -->
        <div class="modal" id="addItem" style="display: none">
            <div class="modal-header">
                <a class="close close-form" href="#" data-dismiss="modal">&times;</a>
                <h3>Add New Item</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addForm">
                    <div class="control-group">
                        <label class="control-label" for="inputTitle">Title</label>
                        <div class="controls">
                            <input type="text" id="inputTitle" name="name" placeholder="Title ...">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputPrice">Price</label>
                        <div class="controls">
                            <input type="text" id="inputPrice" name="price" placeholder="Price ...">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputLengths">Lengths</label>
                        <div class="controls">
                            <input type="text" id="inputLengths" name="lengths" placeholder="Lengths ...">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputHeight">Height</label>
                        <div class="controls">
                            <input type="text" id="inputHeight" name="height" placeholder="Height ...">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputWidth">Width</label>
                        <div class="controls">
                            <input type="text" id="inputWidth" name="width" placeholder="Width ...">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputImage">Image</label>
                        <div class="controls">
                            <input type="text" id="inputImage" name="image" placeholder="Fill the pass to image">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-danger add-item">Add</a>
                <a href="#" class="btn btn-primary close-form" data-dismiss="modal">Close</a>
            </div>
        </div>

        <div class="modal" id="removeItem" style="display: none;">
            <div class="modal-header">
                <a class="close win-close" href="#" data-dismiss="modal">&times;</a>
                <h3>Delete item</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure to delete item?</p>
            </div>
            <div class="modal-footer">
                <a href="index.html" class="btn btn-danger act-remove">Delete</a>
                <a href="#" class="btn btn-primary win-close" data-dismiss="modal">Close</a>
            </div>
        </div>

        <!-- popup end -->
    </div>

</div>

</body>
</html>